<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于事件的捕获和冒泡的部分简介</title>
</head>
<style>
    body{
        text-align: center;
        color: teal;
    }
</style>
<body>
    <h1>事件的捕获和冒泡是 DOM 事件传播的两个阶段，<br>
        它们描述了事件从页面元素中触发后，<br>
        如何在 DOM 树中传播。
    </h1>
    <div><span>捕获 ：</span>从 window → document → html → ... → 目标元素的父元素</div>
    <div>目标阶段是在捕获和冒泡阶段中间的存在到事件发生的目标本身</div>
    <div><span>冒泡 ：</span>从 目标元素 → 父元素 → ... → document → window</div>
    <div>捕获和冒泡从形似上类似于正反循环
        <p>先捕获，后冒泡，目标在中间跑。</p>
    </div>

    <div id="parent">
    <button id="child">Click me</button>

  <script>
    document.getElementById('parent').addEventListener('click', () => {console.log('Parent clicked');}, false);
     // false 表示冒泡阶段监听（默认）
    document.getElementById('child').addEventListener('click', () => {console.log('Child clicked');}, false);
    //此时的console界面的输出结果是
    //Child clicked
    //Parent clicked
    document.getElementById('parent').addEventListener('click', () => {console.log('Parent captured');}, true); 
    // true 表示捕获阶段监听
    //此时的console界面的输出结果是
    //Parent clicked
    //Child clicked
    //Parent clicked
  </script>
</div>
</body>
</html>